<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="挑入原因" prop="PickMemo">
        <el-input v-model="form.PickMemo" />
      </el-form-item>
      <el-form-item label="附件">
        <el-upload
          :file-list="form.ApplyPics"
          :multiple="true"
          action="https://api.sanjianke.com/common/Upload/upload?file=business&type=image"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
  </el-dialog>
</template>

<script>
  import { ApplyOtherPick } from '@/api/customerTerminated'

  export default defineComponent({
    name: 'ApplySelection',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        dialogVisible: false,
        dialogImageUrl: '',
        formRef: null,
        form: {
          ApplyPics: [],
        },
        rules: {
          PickMemo: [
            { required: true, trigger: 'blur', message: '申请原因不能未空' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (row) => {
        if (!row) {
          state.title = '申请挑入他人商机'
        } else {
          state.title = '申请挑入他人商机'
          state.form = Object.assign({}, row)
          state.form.ApplyPics = []
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          ApplyPics: [],
        }
        state.dialogFormVisible = false
      }

      const open = () => {
        ElMessageBox.alert('您已提交申请，请等待审核', '提示', {
          confirmButtonText: '确定',
          type: 'success',
          // callback: (action) => {
          //   ElMessage({
          //     type: 'info',
          //     message: `action: ${action}`,
          //   })
          // },
        })
      }
      const save = () => {
        console.log(state.form.business, ' state.form.PaymentAttFiles')

        state['formRef'].validate(async (valid) => {
          if (valid) {
            const dataMsg = {
              OrderID: state.form.OrderID,
              PickMemo: state.form.PickMemo,
              ApplyPics: state.form.ApplyPics,
            }
            await ApplyOtherPick(dataMsg)
            open()
            emit('fetch-data')
            close()
          }
        })
      }

      const handlePictureCardPreview = (uploadFile) => {
        console.log('uploadFile', uploadFile)
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }

      const handleRemove = (row) => {
        const index = state.form.ApplyPics.findIndex((fileItem) => {
          console.log(fileItem.url, row.response.data.url, '123')
          return fileItem.url === row.response.data.url
        })
        state.form.ApplyPics.splice(index, 1)
      }

      const handleAvatarSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.form.ApplyPics.push(data)
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        handleRemove,
        handleAvatarSuccess,
        handlePictureCardPreview,
        close,
        open,
        save,
      }
    },
  })
</script>
